<template>
  <div class="tc_content">
    <!-- <el-button @click="closeMap" style="width:100%">关闭</el-button> -->
    <p class="m_search">
      <el-input placeholder="按名称搜索" v-model="local">
        <template slot="append"><i class="iconfont icon-search" @click="show(local)"></i></template>
      </el-input>
    </p>
    <div id="container"></div>
    <div class="m_li">
      <ul>
        <li v-for="item in localList" :key="item.id" @click="choosePoint(item)">
          <p><i class="iconfont icon-dingwei"></i>{{item.name}}</p>
          <p>{{item.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script>
export default {
  data () {
    return {
      local:'',
      map:'',
      localList:[],
      point:'',
    }
  },
  props: {
    isshowMap: {},
    chooseLocal:Object,
  },
  mounted() {
    this.init();
  },
  methods: {
    choosePoint(item){
      this.$emit('getLocal',item);
      this.isshowMap();
    },
    show(local){
      var keyword =local;
      var region = "天津";
      var pageIndex = 0;
      var pageCapacity = 5;

            //根据输入的城市设置搜索范围
      this.searchService.setLocation(region);
                //设置搜索页码
      this.searchService.setPageIndex(pageIndex);
                //设置每页的结果数
      this.searchService.setPageCapacity(pageCapacity);
                //根据输入的关键字在搜索范围内检索
      this.searchService.search(keyword);
    },
    closeMap() {
      this.isshowMap();
    },
    init(){
        var centerDiv = document.getElementById("centerDiv");
        this.map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
            center: new qq.maps.LatLng(this.chooseLocal.lat,this.chooseLocal.lng),
            zoom:18
        });
        var middleControl = document.createElement("div");
            middleControl.style.left="27vw";
            middleControl.style.top="17vh";
			      middleControl.style.position="relative";
			      middleControl.style.width="36px";
            middleControl.style.height="36px";
			      middleControl.style.zIndex="100000";
            middleControl.innerHTML ='<i class="iconfont icon-dingwei" style="font-size:30px"></i>';
          document.getElementById("container").appendChild(middleControl);
          this.point =  this.map.getCenter();
          qq.maps.event.addListener(this.map, 'dragend', ()=> {
            this.point = this.map.getCenter();
            this.geocoder.getAddress(this.point);
            });
        //设置Poi检索服务，用于本地检索、周边检索
        this.searchService = new qq.maps.SearchService({
            //检索成功的回调函数
            complete: (result)=> {

                this.localList = result.detail.pois;
                this.map.panTo(new qq.maps.LatLng(this.localList[0].latLng.lat,this.localList[0].latLng.lng));

            },
            //若服务请求失败，则运行以下函数
            error: function() {
              console.log('地图好像出错了~');
            }
        });
        // 坐标：
        this.geocoder = new qq.maps.Geocoder({
            complete : (result)=>{
                this.localList = result.detail.nearPois;
            },
            error:function(){
                console.log('地图好像出错了~');
            }
        });
        this.geocoder.getAddress(this.point);
    }
  },
};
</script>

<style lang="stylus" scoped>
.m_li
  margin 0.1rem
  ul
    max-height 22vh
    overflow auto
    li
      cursor pointer
      border-bottom 1px solid #f1f1f1
      padding 0.1rem 0
      color #333
      &:first-child
        color #26a2ff
      p
        margin-bottom 0.1rem
        &:first-child
          font-size 0.3rem
          i
            font-size 0.35rem
            padding 0.2rem
        &:last-child
          padding-left 0.7rem
          font-size 0.25rem
          color black
#container
  width 100%
  height 40vh
.m_search
  margin-bottom 0.1rem
  background #f1f1f1
  padding 0.1rem 0.2rem
  i
    float right
    padding 0.1rem
    font-size 0.4rem
</style>

